class NotepadReplace extends HTMLElement {
    constructor() {
      super();
      this.template = document.createElement("template");
      this.template.innerHTML = this.#html;
      this.appendChild(this.template.content);
      
      this.querySelector(".close").addEventListener("click", () => {
        this.querySelector(".notepadreplace").style.display = "none";
      });
      this.querySelector(".cancel").addEventListener("click", () => {
        this.querySelector(".notepadreplace").style.display = "none";
      });
     
    }
    #html = `
    <div class="notepadreplace">
    <p>替换<span class="close">×</span></p>
    <div class="replaceinput">
        <label>查找内容(N): <input type="text" autofocus><br></label>
        <label>替换为(P): <input  type="text"><br></label>
        <label class="last"><input type="checkbox">区分大小写(C)</label>
    </div>
    <div class="replacebutton">
        <input type="button" value="查找下一个(F)" disabled="disabled">
        <input  type="button" value="替换(R)" disabled="disabled">
        <input  type="button" value="全部替换(A)" disabled="disabled">
        <input class="cancel" type="button" value="取消">
    </div>
    </div>
        `;
  }
  customElements.define("notepad-replace", NotepadReplace);